/**
* Copyright (c) 2023 - present TinyVue Authors.
* Copyright (c) 202 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

.component-css-vars-drawer() {
  // 最小宽度
  --ti-drawer-min-width: calc(var(--ti-common-space-10, 10px) * 50);
  // 最大宽度
  --ti-drawer-max-width: calc(var(--ti-common-space-10, 10px) * 100);
  // 背景色
  --ti-drawer-bg-color: var(--ti-common-color-bg-white-normal, #fff);
  // 左内边距
  --ti-drawer-padding-left: var(--ti-common-space-8x, 32px);
  // 右内边距
  --ti-drawer-padding-right: var(--ti-common-space-10x, 40px);
  // 遮罩层背景色
  --ti-drawer-mask-bg-color: rgba(0, 0, 0, 0.3);
  // 阴影
  --ti-drawer-shadow: var(--ti-common-shadow-4-down, 0 8px 40px 0 rgba(0, 0, 0, 0.2));
  // 头部与底部边框颜色
  --ti-drawer-divider-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
  // 边框圆角
  --ti-drawer-radius: var(--ti-common-space-0, 0);
  // 遮罩层背景色
  --ti-drawer-mask-bg-color: var(--ti-mobile-color-bg-mask);

  // 头部上内边距
  --ti-drawer-header-padding-top: var(--ti-common-space-8x, 32px);
  // 头部下内边距
  --ti-drawer-header-padding-bottom: var(--ti-common-space-5x, 20px);
  // 头部左内边距
  --ti-drawer-header-padding-left: var(--ti-common-space-0, 0);
  // 头部右内边距
  --ti-drawer-body-padding-right: var(--ti-common-space-0, 0);
  // 头部字号
  --ti-drawer-head-title-font-size: var(--ti-common-font-size-2, 16px);
  // 头部文本色(hide)
  --ti-drawer-head-text-color: var(--ti-common-color-text-primary, #252b3a);
  // 头部标题字重
  --ti-drawer-head-title-font-weight: var(--ti-common-font-weight-7, bold);
  // 头部标题字体色
  --ti-drawer-head-title-text-color: var(--ti-common-text-primary, #252b3a);
  // 关闭按钮宽度
  --ti-drawer-btn-width: var(--ti-common-size-8x, 32px);
  // 关闭按钮高度
  --ti-drawer-btn-height: var(--ti-drawer-btn-width);
  // 关闭按钮图标尺寸
  --ti-drawer-close-icon-size: var(--ti-common-font-size-1, 14px);
  // 关闭按钮圆角
  --ti-drawer-btn-border-radius: var(--ti-common-border-radius-1, 4px);
  // 关闭按钮图标色
  --ti-drawer-close-icon-color: var(--ti-common-color-icon-normal, #575d6c);
  // 关闭按钮悬浮图标色
  --ti-drawer-close-icon-color-hover: var(--ti-common-color-icon-hover, #5e7ce0);
  // 关闭按钮与上边框的距离(hide)
  --ti-drawer-btn-position-top: var(--ti-common-space-5x, 20px);
  // 关闭按钮与右边框的距离(hide)
  --ti-drawer-btn-position-right: var(--ti-common-space-5x, 20px);
  // 标题与帮助图标间距
  --ti-drawer-help-icon-margin-left: var(--ti-common-space-2x, 8px);
  // 帮助图标宽高
  --ti-drawer-help-icon-width-height: var(--ti-common-space-4x, 16px);
  // 帮助图标色
  --ti-drawer-help-icon-color: var(--ti-common-color-info, #252b3a);

  // 内容上内边距
  --ti-drawer-body-padding-top: var(--ti-common-space-0, 0);
  // 内容下内边距
  --ti-drawer-body-padding-bottom: var(--ti-common-space-0, 0);
  // 内容左内边距
  --ti-drawer-body-padding-left: var(--ti-common-space-0, 0);
  // 内容右内边距
  --ti-drawer-header-padding-right: var(--ti-common-space-0, 0);
  // 内容底部边框色(hide)
  --ti-drawer-divider-body-border-color: var(--ti-common-color-transparent);
  // 底部按钮对齐方式
  --ti-drawer-footer-justify-content: flex-end;
  // 底部上内边距
  --ti-drawer-footer-padding-top: var(--ti-common-space-5x, 20px);
  // 底部下内边距
  --ti-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px);
  // 底部左内边距
  --ti-drawer-footer-padding-left: var(--ti-common-space-0, 0);
  // 底部右内边距
  --ti-drawer-footer-padding-right: var(--ti-common-space-0, 0);
  // 底部左外边距
  --ti-drawer-footer-margin-left: var(--ti-common-space-8x, 32px);
  // 底部右外边距
  --ti-drawer-footer-margin-right: var(--ti-common-space-10x, 40px);
  // 底部按钮间距
  --ti-drawer-divider-footer-button-margin-left: var(--ti-common-space-2x, 8px);
  // 底部边框色(hide)
  --ti-drawer-divider-footer-border-color: var(--ti-drawer-divider-border-color, #dfe1e6);
}
